<template>
  <div>
    <BasicModal v-bind="$attrs" @register="registerModal" width="500px"  :title="title" :showCancelBtn="false" :showOkBtn="false">
      <a-form class="antd-modal-form" ref="formRef" :model="formState" :rules="validatorRules">
        <a-form-item name="email">
          <a-input size="large" v-model:value="formState.email" placeholder="请输入新邮箱" />
        </a-form-item>
        <a-form-item name="code">
          <CountdownInput 
            :toUser="formState.email"
            size="large" v-model:value="formState.code" 
            :enableManMachineVerify="true"
            :bizType="BizType.UPDATE_ACCOUNT"
            :taskCode="TaskCode.VERIFY_EMAIl"
            placeholder="输入6位验证码" 
            v-model:verify-info="verifyInfo"
            :sendCodeApi="sendCaptchaMsg" 
          />
        </a-form-item>
        <a-form-item>
          <a-button size="large" type="primary" block @click="updateEmail">
            确认
          </a-button>
        </a-form-item>
      </a-form>
    </BasicModal>
  </div>
</template>

<script lang="ts" setup name="user-replace-email-modal">
import { watch } from 'vue'
import BasicModal from "/@/components/Modal/src/BasicModal.vue";
import { CountdownInput } from '/@/components/CountDown';
import { useUserStore } from "/@/store/modules/user";
import { useMessage } from "/@/hooks/web/useMessage";
import { defineEmits, ref, reactive, toRaw } from "vue";
import { useModalInner } from "/@/components/Modal";
import { sendCaptchaMsg } from "/@/api/sys/msgPush";
import { TaskCode, BizType } from "/@/api/sys/model/msgPushModel";
import { SmsEnum } from "/@/views/sys/login/useLogin";
import { Rule } from "/@/components/Form";
import { rules } from "/@/utils/helper/validator";
import { Form, Row, Col } from "ant-design-vue";
import { updateAccount } from "../UserSetting.api";
import Icon from '/@/components/Icon'

const verifyInfo = ref<any>({})
const userStore = useUserStore();
const { createMessage } = useMessage();
const formState = reactive<Record<string, any>>({
  email:'',
});
const formRef = ref();

const validatorRules: Record<string, Rule[]> = {
  email: [{ required: true, type: 'email', message: '邮箱格式不正确' }],
};
const useForm = Form.useForm;
const title = ref<string>('');
const emit = defineEmits(['register','success']);
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  formRef.value.resetFields();
  formRef.value.clearValidate();
  setModalProps({ confirmLoading: false });
  title.value = '修改邮箱';
});


/**
 * 更新手机号
 */
async function updateEmail() {
  await formRef.value.validateFields();
  if (!verifyInfo.value.toUser) {
    createMessage.warning('请先发送验证码')
    return
  }
  updateAccount({ ...formState, ...verifyInfo.value  }).then((res) =>{
    if(res.success){
      createMessage.success("修改邮箱成功")
      emit("success")
      closeModal();
    }else{
      createMessage.warning(res.message)
    }
  })
}
</script>

<style scoped>

</style>